// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, TextInput, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import Icon from 'react-native-vector-icons/Ionicons';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { categoryList } from '../../module/module'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, ScrollableTabBar, Good } from '../../components/index.js'
import { CategoryGood, List, MallHome } from './components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { u197 } from '../../util/images.js'
import { press, size, ScreenWidth, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class Mall extends Component {

  constructor(props) {
    super(props)
    this.state = {
      fsgGoodDetail: {},
      fssGoodDetail: {},
      fscGoodDetail: {},
      loading: false,
      cardList: null,
    }
  }

  componentDidMount() {
    const { user } = this.props
    InteractionManager.runAfterInteractions(() => {
      // ...耗时较长的同步的任务...
      this.loading = Toast.loading('加载中')
      categoryList({
        pid: 0,
        current: 1,
        size: 9999
      }).then(res => {
        Portal.remove(this.loading)
        console.log(res)
      }).finally(() => {
        Portal.remove(this.loading)
      })
    });

  }

  render() {
    const { categoryList } = this.props
    const { fsgGoodDetail, fssGoodDetail, fscGoodDetail, } = this.state
    return (
      <View style={Style.container}>
        <Status />
        <View style={{
          justifyContent: 'space-between',
          flexDirection: 'row',
          paddingVertical: 5,
          paddingLeft: 15,
          alignItems: 'center',
        }}>
          <TouchableOpacity
            onPress={() => {
              Actions.search()
            }}
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'flex-start',
              flex: 1,
              paddingRight: 15,
            }}
          >
            <Text
              style={{
                flex: 1,
                height: 35,
                lineHeight: 35,
                backgroundColor: '#EEEEEE',
                borderRadius: 3,
                borderWidth: 0,
                padding: 0,
                paddingLeft: 15,
                paddingRight: 15,
                color: '#333'
              }}
            >请输入商品名称</Text>
          </TouchableOpacity>
          <View style={{ flexDirection: 'row', alignItems: 'center', }}>
            <TouchableOpacity
              style={{ width: 40, height: 40, alignItems: 'center', justifyContent: 'center', marginRight: 5 }}
              onPress={() => {
                Actions.shoppingCart()
              }}
            >
              <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/gouwuche.png')} />
              <Text style={{ fontSize: 10, color: '#61676F', lineHeight: 12, marginTop: 2 }}>购物车</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={{ width: 40, height: 40, alignItems: 'center', justifyContent: 'center', marginRight: 5 }}
              onPress={() => {
                Actions.categories()
              }}
            >
              <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../static/images/fenlei.png')} />
              <Text style={{ fontSize: 10, color: '#61676F', lineHeight: 12, marginTop: 2 }}>分类</Text>
            </TouchableOpacity>
            {/* <TouchableOpacity
              style={{ width: 40, height: 40, alignItems: 'center', justifyContent: 'center', }}
              onPress={() => {
                Toast.info('该功能未开放', 1)
                // Actions.demoLightbox()
              }}
            >
              <Icon name="md-expand" size={22} color={'#61676F'} />
              <Text style={{ fontSize: 10, color: '#61676F', lineHeight: 12, marginTop: 2 }}>扫一扫</Text>
            </TouchableOpacity> */}
          </View>
        </View>
        <ScrollableTabView
          // initialPage={index}
          // tabBarPosition="overlayTop"
          renderTabBar={() => <ScrollableTabBar activeTextColor="#000000" inactiveTextColor="#000" style={{ borderBottomColor: 'transparent' }} />}
          tabBarBackgroundColor="#fff"
          tabBarTextStyle={{
            fontSize: 14,
          }}
          tabBarUnderlineStyle={{
            backgroundColor: '#000000',
            height: 2
          }}
          style={{
            backgroundColor: '#fff',
            borderColor: 'transparent',
            width: ScreenWidth
          }}
        >
          <View style={{ flex: 1 }} tabLabel="首页">
            <MallHome categoryList={categoryList} />
          </View>
          {categoryList.records.map((item, index) => (<CategoryGood width={ScreenWidth} key={index} tabLabel={item.categoryName} data={item} />))}
        </ScrollableTabView>
      </View >
    );
  }
}


export default connect(({ user, categoryList }) => ({
  user, categoryList
}))(pureRender(Mall))
